<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 客户信息
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button
                    type="primart"
                    icon="el-icon-delete"
                    class="handle-del mr10"
                    @click="delAllSelection"
                    >批量删除</el-button 
                >-->
                &nbsp;&nbsp;<el-button type="primary" size="small" @click="addVisible = true">添加</el-button>&nbsp;
                <el-button type="primary" size="small" @click="dels">批量删除</el-button>&nbsp;
                客户名称：<el-input v-model="query.customerName" placeholder="客户名称" class="handle-input mr10" :style="{width: '150px'}"></el-input>&nbsp;
                电话号码：<el-input v-model="query.telephone" placeholder="电话号码" class="handle-input mr10" :style="{width: '150px'}"></el-input>&nbsp;
                客户分类：<el-select v-model="query.classification" placeholder="客户分类">
                    <el-option
                        v-for="item in classificationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>&nbsp;
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>&nbsp;
            </div>
            <el-table
                :data="tobleData"
                border
                class="table"
                ref="multipleTable"
                height="500px"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column property="id" label="ID" width="50" align="center"></el-table-column>
                <el-table-column property="region" label="省市区信息" width="70" align="center" :formatter="rgn"></el-table-column>
                <el-table-column property="classification" label="客户分类" width="80" align="center" :formatter="cfn"></el-table-column>
                <el-table-column property="customerName" label="客户名称" width="80" align="center"></el-table-column>
                <el-table-column property="customerAddress" label="客户地址" width="80" align="center"></el-table-column>
                <el-table-column property="contact" label="联系人" width="70" align="center"></el-table-column>
                <el-table-column property="telephone" label="电话号码" width="80" align="center"></el-table-column>
                <el-table-column property="introduce" label="详细介绍" width="80" align="center"></el-table-column>
                <el-table-column property="description" label="跟单描述" width="80" align="center"></el-table-column>
                <el-table-column property="isDeal" label="是否成交" width="80" align="center" :formatter="idl"></el-table-column>
                <el-table-column property="status" label="状态" width="50" align="center" :formatter="fgf"></el-table-column>
                <el-table-column property="sort" label="排序" width="50" align="center" :formatter="sor"></el-table-column>
                <el-table-column property="createdDate" label="创建日期"></el-table-column>
                <el-table-column property="modifiedDate" label="更新日期"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button> 
                        <!--  <el-button type="text" @click="open(scope.$index, scope.row)"
                            >删除</el-button
                        > -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.pageIndex"
                    :page-sizes="[1,2,3,5]"
                    :page-size="query.pageSize"
                    layout="total,sizes,prev,pager,next,jumper"
                    :total="pageTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog v-bind="$attrs" title="添加" v-model="addVisible">
            <el-form ref="elForm" :model="Addform" :rules="rules" size="medium" label-width="100px">
                <el-row :gutter="15">
                    <el-col :span="15">
                        <el-form-item label="客户名" prop="customerName">
                            <el-input v-model="Addform.customerName" placeholder="请输入员工名称" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户类别" prop="classification">
                            <el-select v-model="Addform.classification" clearable placeholder="全部">
                                <el-option
                                    v-for="item in classificationOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="telephone">
                            <el-input v-model="Addform.telephone" placeholder="请输入电话" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="region">
                            <el-select v-model="Addform.region" clearable placeholder="全部">
                                <el-option
                                    v-for="item in regionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户地址" prop="customerAddress">
                            <el-input v-model="Addform.customerAddress" placeholder="请输入职位名称" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客服人员" prop="contact">
                            <el-input v-model="Addform.contact" placeholder="请输入员工描述" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="跟单描述" prop="description">
                            <el-input v-model="Addform.description" placeholder="请输入员工描述" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序" prop="sort">
                            <el-select v-model="Addform.sort" clearable placeholder="全部">
                                <el-option
                                    v-for="item in sortOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否成交" prop="isDeal">
                            <el-select v-model="Addform.isDeal" clearable placeholder="全部">
                                <el-option
                                    v-for="item in isDealOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="详细介绍" prop="introduce">
                            <el-input v-model="Addform.introduce" :rows="2" type="textarea" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="员工状态" prop="status">
                            <el-radio-group v-model="Addform.status" size="medium">
                                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{item.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item size="large">
                    <el-button type="primary" @click="submitFormAdd">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog v-bind="$attrs" title="编辑" v-model="editVisible">
            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-row :gutter="15">
                    <el-col :span="15">
                        <el-form-item label="客户名" prop="customerName">
                            <el-input v-model="formData.customerName" placeholder="请输入员工名称" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户类别" prop="classification">
                            <el-select v-model="formData.classification" clearable placeholder="全部">
                                <el-option
                                    v-for="item in classificationOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="电话号码" prop="telephone">
                            <el-input v-model="formData.telephone" placeholder="请输入电话" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="region">
                            <el-select v-model="formData.region" clearable placeholder="全部">
                                <el-option
                                    v-for="item in regionOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户地址" prop="customerAddress">
                            <el-input v-model="formData.customerAddress" placeholder="请输入职位名称" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客服人员" prop="contact">
                            <el-input v-model="formData.contact" placeholder="请输入员工描述" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="跟单描述" prop="description">
                            <el-input v-model="formData.description" placeholder="请输入员工描述" clearable :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="排序" prop="sort">
                            <el-select v-model="formData.sort" clearable placeholder="全部">
                                <el-option
                                    v-for="item in sortOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否成交" prop="isDeal">
                            <el-select v-model="formData.isDeal" clearable placeholder="全部">
                                <el-option
                                    v-for="item in isDealOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="详细介绍" prop="introduce">
                            <el-input v-model="formData.introduce" :rows="2" type="textarea" placeholder="请输入内容"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="15">
                        <el-form-item label="员工状态" prop="status">
                            <el-radio-group v-model="formData.status" size="medium">
                                <el-radio v-for="(item, index) in statusOptions" :key="index" :label="item.value"
                                :disabled="item.disabled">{{item.label}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item size="large">
                    <el-button type="primary" @click="saveEdit">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { ShowCustomer,AddCustomer,DeleCustomer,DeleCustomers,GetCustomer,UpDateCustomer } from "../../api/customer.js";

export default {
    name: "ShowCustomer",
    data() {
        return {
            query: {
                customerName: "",
                telephone: "",
                classification: 0,
                pageIndex: 1,
                pageSize: 3,
            },
            options: [
                {
                    value: "1",
                    label: "登录",
                },
                {
                    value: "0",
                    label: "登出",
                },
            ],
            classificationOptions: [
                {
                    "value": 0,
                    "label": "全部",
                },
                {
                    "value": 1,
                    "label": "A类",
                },
                {
                    "value": 2,
                    "label": "B类",
                },
                {
                    "value": 3,
                    "label": "C类",
                },
                {
                    "value": 4,
                    "label": "D类",
                },
                {
                    "value": 5,
                    "label": "E类",
                },
            ],
            regionOptions: [
                {
                    "value": 1,
                    "label": "北京",
                },
                {
                    "value": 2,
                    "label": "上海",
                },
                {
                    "value": 3,
                    "label": "天津",
                },
            ],
            isDealOptions: [
                {
                    "value": 1,
                    "label": "已成交",
                },
                {
                    "value": 2,
                    "label": "未成交",
                },
            ],
            sortOptions: [
                {
                    "value": 1,
                    "label": "默认",
                },
                {
                    "value": 2,
                    "label": "一般",
                },
                {
                    "value": 3,
                    "label": "加急",
                }
            ],
            statusOptions: [
                {
                    "value": 1,
                    "label": "登录",
                },
                {
                    "value": 0,
                    "label": "登出",
                },
            ],
            addVisible: false,
            editVisible: false,
            Addform: {
                id: 0,
                region: 1,
                classification: 1,
                customerName: "",
                customerAddress: "",
                contact: "",
                telephone: "",
                introduce: "",
                description: "",
                isDeal: 1,
                status: 1,
                sort: 1,
            },
            formData: {
                id: 0,
                region: 1,
                classification: 1,
                customerName: "",
                customerAddress: "",
                contact: "",
                telephone: "",
                introduce: "",
                description: "",
                isDeal: 1,
                status: 1,
                sort: 1,
            },
            tobleData: [],
            multipleSelection: [],
            delList: [],
            delLists: [],
            pageTotal: 0,
            idx: -1,
            id: -1,
        };
    },
    created() {
        this.Show();
    },
    methods: {
        fgf(row) {
            if (row.status == "1"){
                return <span>登录</span>;
            } else if (row.status == "2"){
                return <span>登出</span>;
            }
        },
        sor(row) {
            if (row.sort == "1"){
                return <span>默认</span>;
            } else if (row.sort == "2"){
                return <span>一般</span>;
            } else if (row.sort == "3"){
                return <span>加急</span>;
            }
        },
        idl(row) {
            if (row.isDeal == "1"){
                return <span>已成交</span>;
            } else if (row.isDeal == "2"){
                return <span>未成交</span>;
            }
        },
        cfn(row) {
            if (row.classification == "1"){
                return <span>A类</span>;
            } else if (row.classification == "2"){
                return <span>B类</span>;
            } else if (row.classification == "3"){
                return <span>C类</span>;
            } else if (row.classification == "4"){
                return <span>D类</span>;
            } else if (row.classification == "5"){
                return <span>E类</span>;
            }
        },
        rgn(row) {
            if (row.region == "1"){
                return <span>北京市</span>;
            } else if (row.region == "2") {
                return <span>上海市</span>;
            } else if (row.region == "3") {
                return <span>天津市</span>;
            }
        },
        Show() {
            ShowCustomer({
                PageSize: this.query.pageSize,
                PageIndex: this.query.pageIndex,
                CustomerName: this.query.customerName,
                Telephone: this.query.telephone,
                Classification: this.query.classification,
            }).then((res) => {
                console.log(res.data);
                this.tobleData = res.data.pagedData;
                this.pageTotal = res.data.totalCount;
            });
        },
        handleSearch() {
            this.Show();
        },
        statusShow(value) {
            if (value == 1) {
                this.query.status = 1;
                this.Show();
            } else {
                this.query.status = 0;
                this.Show();
            }
        },
        //添加操作
        submitFormAdd() {
            AddCustomer(this.Addform)
            .then((res) => {
            console.log(res.code);
            if(res.code>0)
            {
                alert("添加成功");
                this.Show();
            }
            else{
                alert("添加失败");
            }
            });
            this.addVisible = false;
        },
        //重置功能
        resetForm() {
            this.$refs['elForm'].resetFields();
        },
        //删除操作
        handleDelete(index,row) {
            alert(row.id);
            DeleCustomer({
            id:row.id
            }).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    alert("删除成功");
                    this.Show();
                } else {
                    alert("删除失败");
                    this.Show();
                }
            });
        },
        dels(){
            for(var i=0;i<this.multipleSelection.length;i++){
                this.delLists.push(this.multipleSelection[i].id);
            }
            alert(this.delLists);
            if(confirm("请确认是否进行删除!!!")){
                DeleCustomers({
                id: 0+this.delLists,
                }).then((res) => {
                    console.log(res);
                    if (res.code == 1) {
                        alert("批量删除成功");
                        this.Show();
                    } else {
                        alert("批量删除失败");
                        this.Show();
                    }
                });
            }
            this.delLists=[];
        },
        // 多选操作
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        delAllSelection() {
            const length = this.multipleSelection.length;
            let str = "";
            this.delList = this.delList.concat(this.multipleSelection);
            for (let i = 0; i < length; i++) {
                str += this.multipleSelection[i].name + " ";
            }
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
        },
        // 修改操作
        handleEdit(index, row) {
            GetCustomer({
                id:row.id
            })
            .then((res) => {
                console.log(res);
                this.formData = res.data;
            });
            this.editVisible = true;
            /*var i=window.localStorage;
            alert(i["emp"]);
            i["emp"]=JSON.stringify(row);
            this.formData=JSON.parse(i["emp"]);*/
        },
        // 保存修改
        saveEdit() {
            UpDateCustomer(this.formData)
            .then((res) => {
            console.log(res.code);
                if (res.code > 0) {
                    alert("修改成功");
                    this.Show();
                } else {
                    alert("修改失败");
                    this.Show();
                }
                this.Show();
            });
            this.editVisible = false;
        },
        // 分页大小
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.query.pageSize = val;
            this.Show();
        },
        //分页页码
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.Show();
        },
    },
}
</script>